<template>
  <div class="widget-wrap">
    <div class="widget bg-danger" style="color:whitesmoke;">
      <div class="card-front animated col s12 m12 l8 offset-l2 fadeInUp">
        <div class="row">
          <div class="col-md-5">
            <img class="adv" style="width: 100%;" src="../../../assets/images/weixin.jpg"/>
          </div>
          <div class="col-md-7" style="text-align: left;padding-left: 5px;">
            <h2 style="font-size: 18px;margin-bottom: 12px;">关注公众号</h2>
            <small style="font-size: 0.8em;">
              →「技术干货」每日推送<br>
              →「免费资料」随时领取<br>
            <!--  →「签到活动」每周福利<br>-->
            </small>
          </div>
        </div>
      </div>
     <!-- <div style="font-size: 0.8em;">
        <a href="../../../assets/images/weixin.jpg"style="color: #e6a23c;font-size: 14px;">
          点击添加我的微信，加入技术讨论群</a><br>
        除公众号以外，我还会在以下平台发布内容：
      </div>-->
       <div style="font-size: 0.8em;">
        <a href="http://www.hao127.com.cn" style="color: darkorange;font-size: 14px;">
          点击添加我的微信，加入技术讨论群</a><br>
        除公众号以外，我还会在以下平台发布内容：
      </div>
      <div class="profile-block social-links">
        <table style="width: 100%;text-align: center;">
          <tr>
            <td><a style="color: whitesmoke;font-size: 25px;" href="https://github.com/chuhaitao1207"
                   target="_blank"
                   title="GitHub" class="tooltip">
              <img style="width: 22px;height: 22px;" src="../../../assets/icon/github.svg"/></a>
            </td>
            <td><a style="color: whitesmoke;font-size: 25px;" href="https://gitee.com/lnxxs"
                   target="_blank"
                   title="Gitee" class="tooltip">
              <img style="width: 18px;" src="../../../assets/icon/gitee.svg"/></a>
            </td>
            <td><a style="color: whitesmoke;font-size: 25px;"
                   href="https://www.zhihu.com/people/chu-hai-tao-43-28/" target="_blank" title="知乎"
                   class="tooltip">
              <img style="width: 22px;" src="../../../assets/icon/zhihu.svg"/></a>
            </td>
            <td><a style="color: whitesmoke;font-size: 25px;" href="https://me.csdn.net/qq_39922158"
                   target="_blank" title="CSDN" class="tooltip">
              <img style="width: 18px;" src="../../../assets/icon/CSDN.svg"/></a>
            </td>
            <td><a style="color: whitesmoke;font-size: 25px;"
                   href="https://www.jianshu.com/u/3ced1091dbce"
                   target="_blank" title="简书" class="tooltip">
              <img style="width: 22px;" src="../../../assets/icon/JianShu.svg"/></a>
            </td>
            <td><a style="color: whitesmoke;font-size: 25px;" href="https://weibo.com/u/6644164605"
                   target="_blank"
                   title="微博" class="tooltip">
              <img style="width: 22px;" src="../../../assets/icon/weibo.svg"/></a>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script >
    export default {}
</script>

<style >


  .bg-danger {
    background-color: #0077e6;
    padding: 15px;
    margin: 0px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }

  .profile-block {
    padding: 10px 0px 30px 20px;
    margin-top: 10px;
    border-top: 1px solid #eceff2;
  }

  .tooltip {
    opacity: 1;
  }

  .widget-panel {
    background-color: white;
    padding: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }
</style>
